<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="test"></div>
        <!-- 这里全部更改为17.0.1版本的react -->
        <script crossorigin src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/babel">
            /* 
                创建项目并启动
                    第一步:全局安装: npm i create-react-app -g
                    第二步:切换到想创项目的目录,使用命令: create-react-app 文件夹名   (如果创建不成功可能是因为node版本过低)
                    第三步:进入文件夹: cd 文件夹名
                    第四步:启动项目: npm start

                脚手架  功能界面的组件化编码流程
                    1.拆分组件:拆分界面,抽取组件
                    2.实现静态组件:使用组件实现静态页面效果
                    3.实现动态组建
                        3.1:动态显示初始化数据
                            3.1.1:数据类型
                            3.1.2:数据名称
                            3.1.3:保存在那个组件
                        3.2:交互(从绑定事件监听开始)
                打包 npm run build    
                生成build文件夹
                安装:npm install -g serve
                输入  serve build


                组件间的关系：
                    - 父子组件
                    - 兄弟组件（非嵌套组件）
                    - 祖孙组件（跨级组件）
                通信方式：
                    1.props：
                        (1).children props
                        (2).render props
                    2.消息订阅-发布：
                        pubs-sub、event等等
                    3.集中式管理：
                        redux、dva等等
                    4.conText:
                        生产者-消费者模式
                比较好的搭配方式：
                    父子组件：props
                    兄弟组件：消息订阅-发布、集中式管理
                    祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)
            */
        </script>
        <script>
            /* 
            // 修改并赋值
            let obj = {a:1,b:2};
            let obj2 = {...obj,b:3};
            console.log(obj2);//a: 1 b: 3
             */

            /* // 连续解构赋值
            var obj = {a:{b:{c:1}}};
            const {a:{b:{c}}} = obj;
            console.log(c);
            */

            /* 
            // 连续解构赋值  并  修改c的名字
            var obj = {a:{b:{c:111}}};
            const {a:{b:{c:data}}} = obj;
            console.log(data);
            */
           /* 
            let obj = {a:{b:1}}
            const {a} = obj;//传统结构赋值
            const {a:{b}} = obj;//连续解构赋值
            const {a:{b:value}} = obj;//连续解构赋值+重命名
            */
            // var str = ''
            // for (let i = 1; i <= 9; i++) {
                
            //     for (let j = 1; j <=i; j++) {
            //         str += j + "*" + i + "=" + j*i
            //         // console.log(j + "*" + i + "=" + j*i )
            //     }
            //    str += '\n'
            // }
            // console.log(str)

            /* var str = ''
            for (let i = 1; i <= 10; i++) {
                for (let j = 1; j <=i; j++) {
                    str += '★'
                }
                str += '\n'
            }
            console.log(str) */

            /* var numbers = [65, 44, 12, 4];
            numbers.reduce((total, num)=>{
                console.log(total)
	            console.log(num)
            },0) */

            /* var arr = [1, 2, 3, 4];
            var sum = arr.reduce(function(prev, cur, index, arr) {
                console.log(prev, cur, index);      // 1 2 1 , 3 3 2 , 6 4 3
                return prev + cur;
            })
            console.log(arr, sum);  // [1, 2, 3, 4]  10 */
           

        </script>
    </body>
</html>